<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>singer</title>
</head>
<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgb(230, 214, 214);
  }

  li {
    float: left;
  }

  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  li a:hover {
    background-color: rgb(201, 187, 187);
  }

  div.gallery {
    margin: 100px;
    border: 1px solid #ccc;
    float: left;
    width: 250px;
    box-shadow: 10px 10px 10px;
  }

  div.gallery:hover {
    border: 1px solid #777;
  }

  div.gallery img {
    width: 100%;
    height: auto;
  }

  footer {
    clear: both;
    display: block;
    background-color: #f08622;
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
  }
</style>

<body background="sky.jpg">
  <header>
    <ul>
      <li><a href="index.html">主页</a></li>
      <li><a href="MAYDAY.html">天团</a></li>
      <li><a href="Jay.html">天王</a></li>
      <li><a href="Charlie Puth.html">断眉哥</a></li>
    </ul>
    <h1>欢迎来到我的主页!</h1>
  </header>
  <main>
    <p>简单的介绍：这是一个有关歌星的网站</p>
    <div class="gallery"><img src="m1.jpeg"></div>
    <div class="gallery"><img src="m2.jpeg"></div>
  </main>
  <footer>
    <a href="report.html">实验报告</a>
  </footer>
</body>

</html>